<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>

<!DOCTYPE HTML>
<html>
<head>
    <base href="${ctx }/">
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="plugin/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="alert/alert.css">
    <style type="text/css">
    @media (min-width: 768px)
	.col-sm-2 {
	    width: 22.666667%!important;
	}
    </style>
</head>
<body>
<div class="container-fluid">
    <div class="container row">
        <div class="col-md-12">
            <ul class="breadcrumb">
                <li>
                    <i class="icon-home home-icon"></i>
                    <a href="javascript:void(0)">Rider Management(乘客管理)</a>
                </li>
                <li class="active">
                    <a href="view/appUser/user_list.jsp">Rider Database(用户列表)</a>
                </li>
                <li class="active">
                    <a href="user/info">Rider Information(用户信息)</a>
                </li>
            </ul>
        </div>
        <div class="col-md-12"><img src="${user.picture}" class="img-circle" height="60px" width="60px"></div>
        <div class="col-md-12">
            <div class="col-sm-2">Name(名称)：</div>
            <div class="clo-sm-10">${user.firstName}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Mobile(电话)：</div>
            <div class="clo-sm-10">04${user.telephone}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Gender(性别)：</div>
            <div class="clo-sm-10">
                <c:if test="${user.sex==0}">male</c:if>
                <c:if test="${user.sex==2}">other</c:if>
                <c:if test="${user.sex==1}">female</c:if>
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Email(邮箱)：</div>
            <div class="clo-sm-10">${user.email}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Address(地址)：</div>
            <div class="clo-sm-10">${user.address}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Postcode(邮编)：</div>
            <div class="clo-sm-10">${user.postcode}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Corporate Name(创建时间)：</div>
            <div class="clo-sm-10">${user.company}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Mileage(公里)：</div>
            <div class="clo-sm-10">${user.mileage}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Total Consumption(总消费)：</div>
            <div class="clo-sm-10">${user.consumetotal}</div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Registration Time(注册时间)：</div>
            <div class="clo-sm-10">
                <fmt:formatDate value="${user.createTime}" pattern="yyyy-MM-dd hh:mm:ss"></fmt:formatDate>
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Recently Logged In(最近登录)：</div>
            <div class="clo-sm-10">
                <fmt:formatDate value="${user.loginTime}" pattern="yyyy-MM-dd hh:mm:ss"></fmt:formatDate>
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Inviting Users(邀请数)：</div>
            <div class="clo-sm-10">（${user.invitenum}）</div>
            <c:forEach items="${invators}" var="i">
                <div class="col-sm-2 text-center">
                    <img src="${i.picture}" class="img-circle" height="60px" width="60px"><br>
                    <p>${i.name}</p>
                    <p>${i.telephone}</p>
                </div>
            </c:forEach>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">Is it online(是否在线)：</div>
            <div class="clo-sm-10">
                <c:if test="${user.isOnline == 1}">online</c:if>
                <c:if test="${user.isOnline == 2}">offline</c:if>
            </div>
        </div>
        <div class="col-md-12">
            <div class="col-sm-2">User status()状态)：</div>
            <div class="clo-sm-10">
                <c:if test="${user.isDeleted == 0}">enable</c:if>
                <c:if test="${user.isDeleted == 1}">disable</c:if>
            </div>
        </div>
    </div>
</div>
</body>

<!-- 加载需要的js -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="plugin/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src='alert/alert.js'></script>
<script src="plugin/layer/layer.js"></script>
<script type="text/javascript" charset="utf-8">
    var M = {}

    function changeStatus(id, isDeleted, current) {
        $.post(
            "user/update",
            {id: id, isDeleted: isDeleted},
            function (json) {
                if (json.data == 200) {
                    M.dialog2 = jqueryAlert({
                        'title': 'Notification(提示)',
                        'content': '<p>Successful(成功)</p>',
                        'width': "320",
                        'modal': true,
                        'buttons': {
                            'determine': function () {
                                M.dialog2.close();
                            }
                        }
                    });
                } else {
                    M.dialog2 = jqueryAlert({
                        'title': 'Notification(提示)',
                        'content': '<p>Not Successful(失败)</p>',
                        'width': "320",
                        'modal': true,
                        'buttons': {
                            'determine': function () {
                                M.dialog2.close();
                            }
                        }
                    });
                }
                if (M.dialog2) {
                    return M.dialog2.show();
                }
            }
        )
    }
</script>
</html>


